<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>发送消息</title>
  </head>
  <body>
    <input type="text" id="inp" />
    <button class="butt">点击发送</button>
    <ul class="ulmsg">
      <li id="hhh">聊天信息</li>
    </ul>
    <script>
      let ws = new WebSocket("ws://localhost:8005");
      let butt = document.querySelector(".butt");
      let inp = document.querySelector("#inp");
      let msglist = document.querySelector(".ulmsg");
      //   绑定事件获取输入框的值
      butt.onclick = () => {
        let msg = inp.value.trim() ?? "发送了奇怪的消息";
        ws.send(msg);
        inp.value = null;
      };
      ws.onmessage = (res) => {
        let li = document.createElement("li");
        li.innerHTML = res.data;
        msglist.appendChild(li);
      };

      /*  inp.oninput = (e) => {
            console.log(e.target.value);
        }; */
      //   ws.onopen = function () {
      //     ws.send("你好啊 服务器");
      //   };
    </script>
  </body>
</html>
